import { url } from "./config.js"
import {cookie} from "../../static/javascripts/cookie.js"
$(document).ready(function () {
    
    
    //滚动显示影藏
    let time;
    $(window).scroll(function () {
        let offset = $(".item_box").offset()
        let left_position = offset.left - 120;
        let right_position = offset.left + 1120;

        // console.log(left_position);

        clearTimeout(time)
        time = setTimeout(function () {
            let scrolly = $(window).scrollTop();
            if (scrolly <= 100) {
                $("#nav_hide").hide();
            } else {
                $("#nav_hide").show();
            }
            //楼梯吸顶效果
            if (scrolly >= 650) {
                $(".leftFixed").css({
                    "position": "fixed",
                    "top": "100px",
                    "left": left_position + "px"
                })
                $(".rigthFixed").css({
                    "position": "fixed",
                    "top": "100px",
                    "left": right_position + "px"
                })
            } else {
                time = setTimeout(function () {
                    $(".leftFixed").css({
                        "position": "absolute",
                        "top": "0px",
                        "left": "-120px"
                    })
                    $(".rigthFixed").css({
                        "position": "absolute",
                        "top": "0",
                        "left": "1120px"
                    })
                }, 0);
            }
        }, 0)
    });
    $("a").on("click",e=>{
        e.preventDefault();
    })
    $(".toShopCar").on("click",function(e){
        console.log(1);
        e.preventDefault;
        checkLogin();
   })
   function checkLogin(){
       console.log(1);
        let TOKEN = cookie("TOKEN");
        if(TOKEN === null || TOKEN===undefined || TOKEN===""){
            $("#login").trigger("click");
        }else{
        location.href="../../dist/shopCar.html";
        }
   }
    //影藏显示轮播图按钮
    $(".swipe_box").find(".btn_box").hide();
    $(".swipe_box").mouseover(() => {
        $(this).find(".btn_box").show();
    });
    $(".swipe_box").mouseout(() => {
        $(this).find(".btn_box").hide();
    });
    $(".swipe_box").find(".btn_box").mouseover(function () {
        $(this).css({ "color": "#fff" })
        // console.log($(this));
    })
    $(".swipe_box").find(".btn_box").mouseout(function () {
        $(this).css({ "color": "#c9c9c9" })
        // console.log($(this));
    })
    //获取轮播图并渲染
    async function getSwiperSrcs() {
        let res = await axios(url + "/swiper.json")
        let srcs = res.data;
        // console.log(srcs);
        let htmlstr = "";
        for (let i = 0; i < srcs.length; i++) {
            htmlstr += `<li class="swiper-slide">
                            <a href=""><img src=${srcs[i].src}/></a>
                        </li>
                        `;
            // console.log(htmlstr);
        };
        $(".swipe_imgbox").html(htmlstr);
        //swiper 分页器
        let swiper1 = new Swiper("#swiper1", {
            loop: true,
            autoplay: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        })
        swiper1.el.onmouseover = function () {
            swiper1.autoplay.stop();
        }

        //鼠标离开开始自动切换
        swiper1.el.onmouseout = function () {
            swiper1.autoplay.start();
        }

    }
    getSwiperSrcs();

    //获取首页商品数据
    async function getIndeProDatas() {
        let res = await axios(url + "/list.json")
        // console.log(res.data);
        let str = ""
        let data = res.data;
        data.forEach(item => {
            let mid_part_data = item.midpart;
            let mid_str = "";
            mid_part_data.forEach(_item => {
                mid_str += `
            <li>
                <p>
                    <span class="title">${_item.title}</span><br>
                    <span>${_item.desc}</span>
                </p>
                <img src="${_item.imgsrc}" alt=""> 
            </li>
            `;
            });
            let right_part_data = item.rightpart;
            let rigth_str1 = "";
            let rigth_str2 = "";
            let rigth_str3 = "";
            for (let i = 0; i < right_part_data.length; i++) {
                if (i < 4) {
                    rigth_str1 += `
                            <dl>
                                <dt><img src="${right_part_data[i].imgsrc}" alt=""></dt>
                                <dd>
                                    <div class="item_title">${right_part_data[i].title}</div>
                                    <p><span class="now_price">${right_part_data[i].price}</span><span class="old_price"><del>${right_part_data[i].odlPrice}</del></span></p>
                                </dd>
                            </dl>
                `;
                }
                else if (i >= 4 && i < 8) {
                    rigth_str2 += `
                <dl>
                <dt><img src="${right_part_data[i].imgsrc}" alt=""></dt>
                <dd>
                    <div class="item_title">${right_part_data[i].title}</div>
                    <p><span class="now_price">${right_part_data[i].price}</span><span class="old_price"><del>${right_part_data[i].odlPrice}</del></span></p>
                </dd>
                </dl>
                `;
                }
                else if (i >= 8) {
                    rigth_str3 += `
                <dl>
                <dt><img src="${right_part_data[i].imgsrc}" alt=""></dt>
                <dd>
                    <div class="item_title">${right_part_data[i].title}</div>
                    <p><span class="now_price">${right_part_data[i].price}</span><span class="old_price"><del>${right_part_data[i].odlPrice}</del></span></p>
                </dd>
                </dl>
                `;
                }

            }
            let bot_data = item.bottompart;
            let bot_str = "";
            bot_data.forEach(_item => {
                bot_str += `
                <div class="pp_item">
                    <a href="${_item.href}">
                        <img src="${_item.src}" alt="">
                    </a>
                    <i class="iconfont soucang_btn icon-shoucangaixinxin"></i>
                </div>
                    `;
            });

            str += `
            <div class="item">
            <div class="item_topbar">
                <dl>
                    <dt class="item_title">${item.title}</dt>
                    <dd>
                        <ul class="hot_pro">
                            <li>热搜词:</li>
                            <li>${item.hotwords[0]}</li>
                            <li>${item.hotwords[1]}</li>
                            <li>${item.hotwords[2]}</li>
                            <li>${item.hotwords[3]}</li>
                        </ul>
                    </dd>
                </dl>
                <div class="more_pro">更多好货</div>
            </div>
            <div class="item_top">
                <div class="left_part">
                    <img src="${item.leftpart.src}" alt="">
                    <ul>
                        <li><span>运动潮鞋</span></li>
                        <li><span>防晒</span></li>
                        <li><span>运动服饰</span></li>
                        <li><span>瑜伽游泳</span></li>
                        <li><span>运动鞋</span></li>
                        <li><span>户外鞋靴</span></li>
                    </ul>
                </div>
                <div class="mid_part">
                    <ul>
                        ${mid_str}
                    </ul>
                </div>
                <div class="right_part swiper-container item_swiper">
                    <div class="title">
                        最新热卖
                    </div>
                    <divc class="swiper-wrapper">
                        <div class="swiper-slide">
                            ${rigth_str1}
                        </div>
                        <div class="swiper-slide">
                            ${rigth_str2}                                                        
                        </div>
                        <div class="swiper-slide">
                            ${rigth_str3}                            
                        </div>
                    </divc>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="item_bottom">
                <p>热卖品牌</p>
                <div class="pp_imgbox">
                    ${bot_str}
                </div>
            </div>
        </div>
        `
        });
        $(".item_box").append(str);
        console.log($(".item_box").find(".left_part"));
        $(".item").find(".left_part").on("click",function(){
            location.href = "../../dist/active.html"
        })
        let str2 = "";
        for(let i =0 ; i<4 ; i++){
            str2 +=`
            <li>
            <dl>
                <dt>
                    <img src="https://kaola-haitao.oss.kaolacdn.com/11efed64-2c83-40e0-af51-a62019599378.jpg?imageView&thumbnail=430x430" alt="">   
                </dt>
                <dd>
                    <p class="title">BLACKMORES 澳佳宝 原味深海鱼油胶囊1000mg 400粒/瓶*2瓶【补充日常omega】</p>
                    <div class="goodsinfo">
                        <p class="price">
                            <span class="symbol1">¥</span>
                            <span class="symbol2">298</span>
                            <span class="symbol3">¥</span>
                            <span class="symbol4"><del>464</del></span>
                        </p>
                        <a href="">"17267""人已评价"</a>
                    </div>
                </dd>
            </dl>
            </li>
            `
        }
        // console.log($("ulicke_goods"));
        $(".ulicke_goods").append(str2);
        let swiper2 = new Swiper(".item_swiper", {
            loop: true,
            autoplay: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        })
        
    }
    getIndeProDatas();

    //left楼梯直达
    $(".stairs").find("li").on("click", function () {
        let index = $(this).attr("stairs_index");
        let nav_height = $("nav").innerHeight();
        let swiper_height = $("#swiper1").innerHeight();
        let item_height = $(".item_box").find(".item").eq(0).innerHeight();
        console.log(nav_height + swiper_height);
        $("html,body").stop().animate({ scrollTop: ((nav_height + swiper_height) + index * item_height) });
        console.log($("html,body").scrollTop());
    })
    //right电梯toTop
    $("#toTop").on("click", function () {
        $("html,body").stop().animate({ scrollTop: "10" });
    })

    
})